<template><!--客户信息-->
  <div class="CustomerInfo">

    <div class="router-box" style=" margin-bottom: 20px;">
      <el-row :gutter="20">
        <el-col :span="12">
          <router-link :to="{name:'CustomerInfo'}">客户信息</router-link>
        </el-col>
        <el-col :span="12">
          <router-link :to="{name:'Contacts'}">我的联系人</router-link>
        </el-col>
      </el-row>
    </div>
    <div class="search-box">
      <el-input placeholder="请输入内容" class="input-with-select">
        <el-button slot="append" icon="el-icon-search"></el-button>
      </el-input>

    </div>
    <div class="absolute-box" style='flex:1' v-if='guest.length>0'>
      <vue-ztree :list.sync='guest'
                 :contextmenu='contextmenuClick'
                 v-on:getDetail="getDetail"
                 :is-open='false'>

      </vue-ztree>
    </div>



    <el-dialog :title="model.dWName" :visible.sync="dialogFormVisible">
      <el-form :model="model">
        <el-form-item label="全称">
          <el-input v-model="model.dWName" readonly="readonly"></el-input>
        </el-form-item>
        <el-form-item label="简称">
          <el-input v-model="model.bieMing" readonly="readonly"></el-input>
        </el-form-item>
        <el-form-item label="拼音码">
          <el-input v-model="model.pym" readonly="readonly"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="model.dWRemark" readonly="readonly" type="textarea "></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogFormVisible = false">关闭</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  import vueZtree from 'components/vue-ztree.vue'
  // import guest from'/api/Guest/GetGuestByCondition.json'
  export default {
    data() {
      return {
        guest: {},
        showDetail: false,
        ztreeDataSourceList: [
          {
            id: 880,
            name: "娱乐",
            // iconClass:"iconClassRoot",
            // open:true,
            children: [
              {
                id: 881,
                name: "游戏",
                clickNode: true,
                iconClass: "iconClassNode",
              }, {
                id: 882,
                name: "电影",
                iconClass: "iconClassNode",
              }, {
                id: 883,
                name: "新闻",
                iconClass: "iconClassNode",
              }]
          },
          {
            id: 990,
            name: "BAT",
            iconClass: "iconClassRoot",
            open: false,
            children: [{
              id: 991,
              name: "马化腾",
              iconClass: "iconClassNode",
            }, {
              id: 992,
              name: "李彦宏",
              iconClass: "iconClassNode",
            }, {
              id: 993,
              name: "马云",
              iconClass: "iconClassNode",
            }]
          }],
        dialogFormVisible: false,
        model: {},
        form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
      }
    },
    methods: {
      // 点击节点
      nodeClick: function (m) {
        console.log(JSON.parse(JSON.stringify(m)));
      },
      // 右击事件
      contextmenuClick: function () {
        console.log("触发了自定义的contextmenuClick事件");
      },
      // 点击展开收起
      expandClick: function (m) {
        console.log(JSON.parse(JSON.stringify(m)));
        // 点击异步加载
        if (m.isExpand) {
          // 动态加载子节点, 模拟ajax请求数据
          // 请注意 id 不能重复哦。
          if (m.hasOwnProperty("children")) {

            m.loadNode = 1; // 正在加载节点

            setTimeout(() => {

              m.loadNode = 2; // 节点加载完毕

              m.isFolder = !m.isFolder;

              var node = JSON.parse(JSON.stringify(m));

              // 动态加载子节点, 模拟ajax请求数据
              // 请注意 id 不能重复哦。
              if (node.hasOwnProperty("children")) {
                node.children.push({
                  id: +new Date(),
                  name: "动态加载节点1",
                  path: "",
                  clickNode: false,
                  isFolder: false,
                  isExpand: false,
                  loadNode: 0,
                  children: [{
                    id: +new Date() + 1,
                    name: "动态加载末节点",
                    path: "",
                    clickNode: false,
                    isFolder: false,
                    isExpand: false,
                    loadNode: 0
                  }]
                });

                m.children = node.children;
              }

            }, 1000)

          }
        }
      },
      getDetail: function (m) {
        this.dialogFormVisible = true;
        this.model = m;
      }
    },
    components: {
      vueZtree
    },
    created() {
      // 在模板渲染成html前调用,即通常初始化某些属性值

      this.$http.get('/mock/Guest/GetGuestByCondition.json').then((response) => {
        response = response.body;
        for (var i=0;i<response.rows.length;i++){
          response.rows[i].label=response.rows[i].dWName
        }
        this.guest = response.rows;
      });
    },
    mounted() {
    }
  }
</script>

<style>
</style>